<template>
    <div class="production-filter">
        <el-autocomplete
            v-model="searchValue"
            placeholder="查询产品生产日志，可使用：产品名称、产品尺寸、面纸尺寸、瓦纸尺寸、材质"
            :fetch-suggestions="querySearch"
            @select="handleSelect"
            clearable
        />
    </div>
    <div v-if="data.length != 0" class="production-list">
        <div style="width: 100%; height: calc(100vh - 250px)">
            <el-auto-resizer>
                <template #default="{ height }">
                    <el-scrollbar :height="height">
                        <el-descriptions v-for="(d, index) in data" :key="index" :title="`生产记录${index + 1}`" :column="6" border class="mb-2">
                            <div v-for="(item, i) in d" :key="i">
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="flex items-center">
                                            <el-icon class="el-icon--left"><CalendarTime /></el-icon>
                                            下单时间
                                        </div>
                                    </template>
                                    {{
                                        formatTimeZone(
                                            item.purchaseId.createdAt == undefined ? '未知' : item.purchaseId.createdAt,
                                            'YYYY-MM-DD HH:mm:ss'
                                        )
                                    }}
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="flex items-center">
                                            <el-icon class="el-icon--left"><BrandProducthunt /></el-icon>
                                            产品名称
                                        </div>
                                    </template>
                                    {{ item.purchaseId.productName }}
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="flex items-center">
                                            <el-icon class="el-icon--left"><Carbon3rdPartyConnected /></el-icon>
                                            部门
                                        </div>
                                    </template>
                                    {{ matchProductionType(item.productionType) }}
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="flex items-center">
                                            <el-icon class="el-icon--left"><AiStatusQueued /></el-icon>
                                            生产状态
                                        </div>
                                    </template>
                                    {{ matchProductionStatus(item.productionStatus) }}
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="flex items-center">
                                            <el-icon class="el-icon--left"><FileDigit /></el-icon>
                                            订单数量
                                        </div>
                                    </template>
                                    {{ item.purchaseId.orderNumber }}
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="flex items-center">
                                            <el-icon class="el-icon--left"><FileDigit /></el-icon>
                                            生产数量
                                        </div>
                                    </template>
                                    <el-text :type="Number(item.purchaseId.orderNumber) > Number(item.productionNumber) ? 'danger' : 'success'">
                                        {{ item.productionNumber }}
                                    </el-text>
                                </el-descriptions-item>
                            </div>
                        </el-descriptions>
                    </el-scrollbar>
                </template>
            </el-auto-resizer>
        </div>
    </div>
    <div v-if="data.length === 0" style="width: 100%; height: calc(100vh - 250px)">
        <el-empty description="暂无数据"></el-empty>
    </div>
</template>

<script setup lang="ts">
import { getAllProductList } from '@api/product';
import { getProductionLogList } from '@api/production';
import { CalendarTime, BrandProducthunt, FileDigit } from '@vicons/tabler';
import { Carbon3rdPartyConnected, AiStatusQueued } from '@vicons/carbon';
import { formatTimeZone } from '@utils/calculate';

onMounted(() => {
    // 加载所有产品列表
    getAllProductList().then((res) => {
        res.data.forEach((item) => {
            item.products.forEach((product) => {
                restaurants.value.push({
                    value: product.productName,
                    productId: product._id,
                    productSize: product.productSize,
                    tissueSize: product.tissueSize,
                    corrugatedSize: product.corrugatedSize,
                    materialQuality: product.materialQuality,
                });
            });
        });
    });
});
/* ******************************通用属性/方法****************************** */
// 展示数据
const data = reactive<AjaxResponse['productionList'][]>([]);
// 获取数据的方法
const getProductionLogListEvent = async (productId: string) => {
    if (!productId) {
        ElMessage.error('请先选择产品');
        return;
    }
    // 清空通用属性
    data.length = 0;
    // 获取采购列表
    getProductionLogList(productId).then((res) => {
        // 取出数据
        res.data.forEach((item) => {
            data.push(item);
        });
        console.log(data);
    });
};
/* ******************************自动补全查询属性/方法****************************** */
interface RestaurantItem {
    value: string;
    productId: string;
    productSize: string;
    tissueSize: string;
    corrugatedSize: string;
    materialQuality: string;
}
// 搜索框
const searchValue = ref('');
// 搜索数据
const restaurants = ref<RestaurantItem[]>([]);
// 搜索方法
const querySearch = (queryString: string, cb: any) => {
    const results = queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value;
    // call callback function to return suggestions
    cb(results);
};
// 过滤方法
const createFilter = (queryString: string) => {
    return (restaurant: RestaurantItem) => {
        // 正则处理特殊符号
        const regex = /[.*+?^${}()|[\]\\]/;
        // 正则匹配产品名称/产品尺寸/面纸/瓦纸/材质
        const match = queryString.replace(regex, '\\$&');
        // 过滤正则
        const reg = new RegExp(match, 'i');
        if (
            reg.test(restaurant.value) ||
            reg.test(restaurant.productSize) ||
            reg.test(restaurant.tissueSize) ||
            reg.test(restaurant.corrugatedSize) ||
            reg.test(restaurant.materialQuality)
        ) {
            return true;
        }
    };
};
// 选中事件查找生产记录事件
const handleSelect = (item: Record<string, any>) => {
    getProductionLogListEvent(item.productId);
};

/* ******************************工具属性/方法****************************** */
// 匹配生产工艺
const matchProductionType = (type: string) => {
    let obj = {
        outerbox: '外箱生产',
        packouterbox: '外箱打包',
        diecutting: '模切生产',
        backing: '裱瓦生产',
        innerbox: '内盒生产',
        packinnerbox: '内盒打包',
    };
    return obj[type];
};
// 匹配生产状态
const matchProductionStatus = (status: string) => {
    let obj = {
        waiting: '待生产',
        producing: '生产中',
        finished: '已完成',
    };
    return obj[status];
};
</script>

<style scoped lang="scss">
.production-filter {
    height: 50px;
    width: 600px;
}
.production-list {
    height: calc(100vh - 230px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.production-pagination {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
}
</style>
